<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>{$title}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Wx/css/base.css" />
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Wx/css/detail.css" />
<link href="__PUBLIC__/Wx/css/layout.min.css" rel="stylesheet" />
<link href="__PUBLIC__/Wx/css/scs.min.css" rel="stylesheet" />
</head>

<style>
	#areabox{
		width: 70%;float: right;
	}
	#areabox select{
		width: 30%;
		height: 50px;
		font-size: 15px;
	}
	.write ul li span{
		float: left;
	}
</style>

<body>

	<div class="detail">
		<!--<form id="js_form" action="<?=U('MyAddress/addrInfo')?>" method="post">-->
		<form id="js_form">
			<notempty  name="addrInfo.id">
				<input type="hidden" name="id" value="<?=$addrInfo['id']?>">
			</notempty >
			<div class="write">
				<ul>
					<li><span>收货人</span><input name="name" value="<?=$addrInfo['name']?>" type="text" placeholder="请输入姓名" required/></li>
					<li><span>联系电话</span><input name="mobile" value="<?=$addrInfo['mobile']?>" type="text" placeholder="请输入电话" required/></li>
					<li><span>所在地区</span>
						<input type="text" laceholder="Click me to pick an address" id="myAddrs" name="addr" data-key="{$addrInfo.a_id_1}-{$addrInfo.a_id_2}-{$addrInfo.a_id_3}" value="{$addrInfo.a_1_name} {$addrInfo.a_2_name} {$addrInfo.a_3_name}" style="background:url(__PUBLIC__/Wx/img/right.png) no-repeat right center; background-size:20px 20px;"/>
						<input type="hidden" name="a_id" value="">
					</li>
					<li style="margin-bottom:10px;">
						<span>详细地址</span><input type="text" name="content" value="<?=$addrInfo['content']?>" placeholder="请输入详细地址" required/>
					</li>
				</ul>
			</div>
			<div class="button"><input type="button" id="button" value="保存"/></div>
		</form>
	</div>

	<!--引入js-->
	<script src="__PUBLIC__/Wx/js/jquery.min.js"></script>
	<script src="__PUBLIC__/js/layer/layer.js"></script>

	<script>

		// 表单提交
        $('#button').click(function(){
            var a_id = $("input[name='addr']").attr('data-key');
            $("input[name='a_id']").val(a_id);//把三级id传给隐藏input
            $.ajax({
                type: "POST",
                url:"/Wx/MyAddress/addrInfo/",
                data:$('#js_form').serialize(),// 要提交的表单
                success: function(data) {
                    console.log(data);
                    //提交成功后调用
                    if(data.status==1) {
                        layer.msg(data.info, {icon:1,time:1000},
                            function(){
                                window.location.href= data.url;
                            });
                    }else{
                        layer.msg(data.info, {icon:2,time:1000});
                    }
                },
                error: function(error){alert(error);}
            });
        })

	</script>

	<script src="__PUBLIC__/Wx/js/jquery.scs.min.js"></script>
	<script>
        var addr_arr=new Array;

        {$ali}

        $(function() {
            /**
             * 通过数组id获取地址列表数组
             *
             * @param {Number} id
             * @return {Array}
             */
            function getAddrsArrayById(id) {
                var results = [];
                if (addr_arr[id] != undefined)
                    addr_arr[id].forEach(function(subArr) {
                        results.push({
                            key: subArr[0],
                            val: subArr[1]
                        });
                    });
                else {
                    return;
                }
                return results;
            }
            /**
             * 通过开始的key获取开始时应该选中开始数组中哪个元素
             *
             * @param {Array} StartArr
             * @param {Number|String} key
             * @return {Number}
             */
            function getStartIndexByKeyFromStartArr(startArr, key) {
                var result = 0;
                if (startArr != undefined)
                    startArr.forEach(function(obj, index) {
                        if (obj.key == key) {
                            result = index;
                            return false;
                        }
                    });
                return result;
            }

            //bind the click event for 'input' element
            $("#myAddrs").click(function() {
                document.activeElement.blur();//让下面键盘不弹出
                var PROVINCES = [],
                    startCities = [],
                    startDists = [];
                //Province data，shall never change.
                addr_arr[0].forEach(function(prov) {
                    PROVINCES.push({
                        key: prov[0],
                        val: prov[1]
                    });//alert(prov[0]);alert(prov[1]);//省的id和名称
                });
                //init other data.
                var $input = $(this),
                    dataKey = $input.attr("data-key"),
                    provKey = 408533, //default province 湖北省
                    cityKey = 408534, //default city 武汉市
                    distKey = 409096, //default district 武昌区
                    distStartIndex = 0, //default 0
                    cityStartIndex = 0, //default 0
                    provStartIndex = 0; //default 0
                //alert($input); //对象
                if (dataKey != "" && dataKey != undefined) {
                    var sArr = dataKey.split("-");//alert(sArr);
                    if (sArr.length == 3) {
                        provKey = sArr[0];
                        cityKey = sArr[1];
                        distKey = sArr[2];

                    } else if (sArr.length == 2) { //such as 台湾，香港 and the like.
                        provKey = sArr[0];
                        cityKey = sArr[1];
                    }
                    startCities = getAddrsArrayById(provKey);
                    startDists = getAddrsArrayById(cityKey);
                    provStartIndex = getStartIndexByKeyFromStartArr(PROVINCES, provKey);
                    cityStartIndex = getStartIndexByKeyFromStartArr(startCities, cityKey);
                    distStartIndex = getStartIndexByKeyFromStartArr(startDists, distKey);
                }
                //3 scrollers, and the title and id will be as follows:
                //上面的注释如果写在{后会造成无法显示省，可能是js解释程序无法过滤干净造成的bug，不是第一次遇到了
                var navArr = [{
                    title: "省",
                    id: "scs_items_prov"
                }, {
                    title: "市",
                    id: "scs_items_city"
                }, {
                    title: "区",
                    id: "scs_items_dist"
                }];
                SCS.init({
                    navArr: navArr,
                    onOk: function(selectedKey, selectedValue) {
                        $input.val(selectedValue).attr("data-key", selectedKey);
                    }
                });
                var distScroller = new SCS.scrollCascadeSelect({
                    el: "#" + navArr[2].id,
                    dataArr: startDists,
                    startIndex: distStartIndex
                });
                var cityScroller = new SCS.scrollCascadeSelect({
                    el: "#" + navArr[1].id,
                    dataArr: startCities,
                    startIndex: cityStartIndex,
                    onChange: function(selectedItem, selectedIndex) {
                        distScroller.render(getAddrsArrayById(selectedItem.key), 0); //re-render distScroller when cityScroller change
                    }
                });
                var provScroller = new SCS.scrollCascadeSelect({
                    el: "#" + navArr[0].id,
                    dataArr: PROVINCES,
                    startIndex: provStartIndex,
                    onChange: function(selectedItem, selectedIndex) { //re-render both cityScroller and distScroller when provScroller change
                        cityScroller.render(getAddrsArrayById(selectedItem.key), 0);
                        distScroller.render(getAddrsArrayById(cityScroller.getSelectedItem().key), 0);
                    }
                });

            });
        });
	</script>


</body>
</html>